<template>
  <div
    class="captcha-bar"
    :class="backLeft && 'transition'"
    ref="barRef"
    :style
  ></div>
</template>

<script setup lang="ts">
import { computed, ref, useTemplateRef } from 'vue'
import type { BarExposes, BarProps } from './types'

const props = withDefaults(defineProps<BarProps>(), {
  barStyle: () => ({}),
  backLeft: false
})

const barRef = useTemplateRef<HTMLDivElement>('barRef')

const getEl = () => barRef.value

const width = ref('0')

const setWidth = (val: string) => {
  width.value = val
}

const style = computed(() => {
  return {
    ...props.barStyle,
    width: width.value
  }
})

defineExpose<BarExposes>({
  getEl,
  setWidth
})

defineOptions({
  name: 'CoreCaptchaBar'
})
</script>

<style scoped lang="scss">
.captcha-bar {
  position: absolute;
  height: 100%;
  background-color: rgb(var(--core-success-color));

  &.transition {
    width: 0 !important;
    transition: width 0.3s;
  }
}
</style>
